<template>
<div class="backup">
    <div class='box'>
         <h1>数据导出</h1>
        <el-form :model="file" ref="file" label-width="100px" class="demo-ruleForm" size="mini">
            <el-row>
                <div class="table">
               <el-col :span=20>
                    <el-form-item >
                        <span slot="label">
                            <span style="color:black; font-size:14px"><strong>导出数据名：</strong></span>
                        </span>
                       <el-select v-model="file.downloadType" placeholder="请选择" id='dataName'>
                         <el-option
                           v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                        </el-option>
                   </el-select>
                    </el-form-item>
                   <!--  <el-form-item>
                         <span slot="label">
                            <span style="color:black; font-size:14px"><strong>导出位置：</strong></span>
                        </span>
                        <el-upload
                          class="upload-demo"
                          ref="upload"
                          action="https://jsonplaceholder.typicode.com/posts/"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :file-list="fileList"
                          :auto-upload="false">
                    <el-input slot="trigger" size="small" type="primary" value="选取位置" id='location'></el-input>
                    </el-upload>
                    </el-form-item>
                    <el-form-item >
                        <span slot="label">
                            <span style="color:black; font-size:14px"><strong>导出格式：</strong></span>
                        </span>
                         <el-select v-model="file.downloadType" placeholder="请选择" id="type">
                         <el-option value=".xlxs">
                        </el-option>
                   </el-select>
                    </el-form-item> -->
                      <el-form-item >
                        <span slot="label">
                            <span style="color:black; font-size:14px"><strong>导出文件名：</strong></span>
                        </span>
                        <el-input id="ipt1" v-model="file.fileName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span=20>
                    <el-form-item >
                        <span slot="label">
                            <span style="color:black; font-size:14px"><strong>开始时间：</strong></span>
                        </span>
                        <div class="block">
                          <el-date-picker
                           v-model="file.startTime"
                           type="datetime"
                           value-format="yyyy-MM-dd HH:mm:ss"
                           placeholder="选择日期时间">
                         </el-date-picker>
                        </div>
                    </el-form-item>
              </el-col>
                <el-col>
                     <el-form-item >
                        <span slot="label">
                            <span style="color:black; font-size:14px"><strong>结束时间：</strong></span>
                        </span>
                        <div class="block">
                          <el-date-picker
                           v-model="file.endTime"
                           value-format="yyyy-MM-dd HH:mm:ss"
                           type="datetime"
                           placeholder="选择日期时间">
                         </el-date-picker>
                        </div>
                    </el-form-item>
                </el-col>
                </div>
                <div class="btn">
                <el-col>
                <el-popover
                    placement="top"
                    width="200"
                    height="100"
                    v-model="visible">
                    <p>你确定要取消吗？取消后不会保存</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                    <el-button type="primary" size="mini">确定</el-button>
              </div>
                    <el-button slot="reference" type="danger" class="el-icon-error" style="margin-right:200px">取消</el-button>
              </el-popover>
                    <el-button type="success"  class="el-icon-success" style="margin-right:0px" @click="check">导出</el-button>
                </el-col>
                </div>

            </el-row>
        </el-form>
    </div>
</div>
</template>

<script>
import axios from '../../../axios'
export default {
  name: 'backup',
  data () {
    return {
      file: {

        downloadType: '',
        fileName: '',
        startTime: '',
        endTime: ''

      },
      options: [{
        value: '选项1',
        label: '出库表'
      }, /*  {
          value: '选项2',
          label: '入库表'
        },  */{
        value: '选项3',
        label: '库区表'
      }, {
        value: '选项4',
        label: '盘查表'
      }, {
        value: '选项5',
        label: '货物表'
      },
      {
        value: '选项6',
        label: '员工表'
      },
      {
        value: '选项7',
        label: '顾客表'
      }]
    }
  },
  methods: {

    // 判断非空
    check () {
      console.log(this.file)
      axios({
        url: '/dp/customer/download',
        method: 'POST',
        // 需要想办法传入page对象
        data: JSON.stringify(this.file),
        responseType: 'blob'
      }).then(res => {
        var blob = new Blob([res.data])
        var downloadElement = document.createElement('a')
        var href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = this.file.fileName // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
      }).catch(err => {
        console.log(err.response)
        this.$alert(err.response.data.msg, '请联系管理员', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
      })
      /*     console.log(this.file);
              if(document.getElementById('ipt1').value.length==0&&document.getElementById('type').value.length==0&&document.getElementById('location').value.length==0&&document.getElementById('dataName').value.length==0){
                    alert('输入框给不能为空！');
                    document.getElementById('ipt1').focus();
                    return false;
                }else{
                    if(this.file.dataName=='出库记录'){
                         axios({
            url: '/dp/question/downloadQuestion',
            method: "get",
            //需要想办法传入page对象
            params: {
               /*  endTime:this.file.endTime,
                startTime:this.file.startTime,
                fileName:this.file.fileName
            },
            responseType:'blob',
          }).then(res => {

   var blob = new Blob([res.data])
          var downloadElement = document.createElement('a');
      　　var href = window.URL.createObjectURL(blob); //创建下载的链接
      　　downloadElement.href = href;
      　　downloadElement.download = '用户数据.xlsx'; //下载后文件名
      　　document.body.appendChild(downloadElement);
      　　downloadElement.click(); //点击下载
      　　document.body.removeChild(downloadElement); //下载完成移除元素
      　　window.URL.revokeObjectURL(href); //释放掉blob对象

          }).catch(err => {
            console.log(err.response)
            this.$alert(err.response.data.msg, "请联系管理员", {
              confirmButtonText: '确定',
              callback: action => {

              }
            });
          })
                    }
                    if(this.file.dataName=='入库记录'){
                         axios({
            url: '/dp/question/downloadQuestion',
            method: "get",
            //需要想办法传入page对象
            params: {
                endTime:this.file.endTime,
                startTime:this.file.startTime,
                fileName:this.file.fileName
            },
            responseType:'blob',
          }).then(res => {

   var blob = new Blob([res.data])
          var downloadElement = document.createElement('a');
      　　var href = window.URL.createObjectURL(blob); //创建下载的链接
      　　downloadElement.href = href;
      　　downloadElement.download = '入库记录.xlsx'; //下载后文件名
      　　document.body.appendChild(downloadElement);
      　　downloadElement.click(); //点击下载
      　　document.body.removeChild(downloadElement); //下载完成移除元素
      　　window.URL.revokeObjectURL(href); //释放掉blob对象

          }).catch(err => {
            console.log(err.response)
            this.$alert(err.response.data.msg, "请联系管理员", {
              confirmButtonText: '确定',
              callback: action => {

              }
            });
          })
                    }

                }
             */
      /* if(document.getElementById('type').value.length==0){
                    alert('文件类型不能为空！');
                    document.getElementById('type').focus();
                    return false;
                }
                if(document.getElementById('location').value.length==0){
                    alert('存储地址不能为空！');
                    document.getElementById('location').focus();
                    return false;
                }
                if(document.getElementById('dataName').value.length==0){
                    alert('导出数据名不能为空！');
                    document.getElementById('dataName').focus();
                    return false;
                } */
    }
  }
}
</script>

<style lang='less' scoped>
.backup{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;
    height: 670px;
.box{
    margin: 100px 350px;
    width: 600px;
    height: 500px;

}
h1{
     text-align: left;
    border-bottom: 2px solid black;
}
.btn{
    margin-top: 20px ;
    height: 50px;
    width: 500px;
}
}
</style>
